<template>
  <div class="body">
    <div class="body-top">
      <div class="body-top-title">
        <el-select v-model="station" placeholder="请选择" :popper-append-to-body="false" @change="changeStation">
          <span slot="prefix">站点:</span>
          <el-option v-for="item in stations" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
    </div>
    <div class="body-content">
      <div class="body-content-top">
        <div class="body-content-top-title"><span>任务列表</span></div>
      </div>
      <div class="body-content-bottom">
        <div class="body-content-bottom-table">
          <div class="body-content-bottom-taskList">
            <div class="taskList-search">
              <div class="task-name">
                <el-input v-model="taskName" placeholder="请输入">
                  <span slot="prefix">任务名称：</span>
                </el-input>
              </div>
              <div class="patrol-type">
                <el-select v-model="patrolType" placeholder="请选择" :popper-append-to-body="false">
                  <span slot="prefix">巡视类型：</span>
                  <el-option v-for="item in patrolTypes" :key="item.patrolType" :label="item.patrolTypeName"
                    :value="item.patrolType" />
                </el-select>
              </div>
              <div class="task-btn">
                <el-button @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
                <el-button @click="insert" style="background: rgba(81, 155, 224, 0.5);">新增</el-button>
              </div>
            </div>
            <el-divider />
            <div class="taskList-table">
              <el-table :data="taskData" style="width: 100%;">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="taskName" label="任务名称" />
                <el-table-column prop="priority" label="优先级" />
                <el-table-column prop="patrolTypeName" label="巡视类型" />
                <el-table-column prop="endActionName" label="结束动作" />
                <el-table-column prop="pointCount" label="点位总数" />
                <el-table-column label="任务执行方式" width="400">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="execute(scope.row, 1)"><span
                        style="color: rgba(0, 255, 255, 1);">立即执行</span></el-button>
                    <el-button type="text" size="small" @click="execute(scope.row, 2)"><span
                        style="color: rgba(0, 255, 255, 1);">定期执行</span></el-button>
                    <el-button type="text" size="small" @click="execute(scope.row, 3)"><span
                        style="color: rgba(0, 255, 255, 1);">周期执行</span></el-button>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="pointEdit(scope.row)"><span
                        style="color: rgba(0, 255, 255, 1);">点位编辑</span></el-button>
                    <el-button type="text" size="small" @click="edit(scope.row)"><span
                        style="color: rgba(0, 255, 255, 1);">编辑</span></el-button>
                    <el-button type="text" size="small" @click="deleteDataDialog(scope.row)"><span
                        style="color: rgba(0, 255, 255, 1);">删除</span></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <el-divider />
        <div class="body-content-bottom-page">
          <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total"
            :current-page.sync="currentPage" @current-change="handlePage" />
        </div>
      </div>
    </div>
    <el-dialog class="operator-dialog" :title="taskExecuteType == 2 ? '定期执行' : '提示'" :visible.sync="dialogVisible"
      width="30%" :before-close="closeDialog">
      <div v-if="taskExecuteType == 2" class="execute-time">
        <span>执行时间：</span>
        <el-date-picker v-model="executeTime" type="datetime" placeholder="请选择执行时间" />
      </div>
      <div v-else><i class="el-icon-warning" v-if="taskExecuteType == 0"></i><i class="el-icon-info" v-else></i><span>{{
          taskTipInfo }}</span></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="cycle-dialog" title="周期执行" :visible.sync="cycleDialogVisible" width="576px"
      :before-close="closeCyleDialog">
      <el-form :model="cycleTask" :rules="rules" ref="cycle">
        <el-form-item label="任务类型：">
          <el-radio-group v-model="cycleTask.taskLoopType">
            <el-radio :label="0">周期任务</el-radio>
            <el-radio :label="1">间隔任务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider />
        <div v-if="cycleTask.taskLoopType == 0">
        <el-form-item label="月份：" prop="executeMonth">
          <el-checkbox-group v-model="cycleTask.executeMonth">
            <el-checkbox v-for="month in months" :key="month.key" :label="month.key">{{ month.value }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周：" prop="executeWeekday">
          <el-checkbox-group v-model="cycleTask.executeWeekday">
            <el-checkbox v-for="weekday in weekdays" :key="weekday.key" :label="weekday.key">{{ weekday.value }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="间隔数量：" prop="intervalNum">
          <el-input-number v-model="cycleTask.intervalNum" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="类型：" prop="intervalUnit">
          <el-radio-group v-model="cycleTask.intervalUnit">
            <el-radio label="minute">分钟</el-radio>
            <el-radio label="hour">小时</el-radio>
            <el-radio label="day">天</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
        <el-form-item label="执行时间：" prop="executeTime">
          <el-time-picker class="task-time" v-model="cycleTask.executeTime" placeholder="请选择执行时间" />
        </el-form-item>
        <el-form-item label="开始时间：" prop="startTime">
          <el-date-picker class="task-time" v-model="cycleTask.startTime"  type="datetime" placeholder="请选择开始时间" />
        </el-form-item>
        <el-form-item label="结束时间：" prop="endTime">
          <el-date-picker class="task-time" v-model="cycleTask.endTime"  type="datetime" placeholder="请选择结束时间" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCycle">取 消</el-button>
        <el-button type="primary" @click="confirmCycle">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="edit-dialog" title="编辑" :visible.sync="editDialogVisible" width="30%" :before-close="closeEdit">
      <el-form :model="editData">
        <el-form-item>
          <el-input v-model="editData.taskName" placeholder="请输入">
            <span slot="prefix">任务名称：</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="editData.priority" placeholder="请选择" :popper-append-to-body="false">
            <span slot="prefix">优先级：</span>
            <el-option v-for="item in prioritys" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="editData.patrolTypeName" placeholder="请输入" :disabled="true">
            <span slot="prefix">巡视类型：</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <span class="end-action">结束动作：</span>
          <el-radio v-model="editData.endAction" label="0">自动充电</el-radio>
          <el-radio v-model="editData.endAction" label="1">原地待命</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    var checkinterval =  (rule, value, callback) => {
        if (this.cycleDialogVisible && (value == null || value.length == 0)) {
          callback(new Error('此项为必选项!'))
        }  else {
          callback()
        }
      }
    return {
      stations: [],
      station: null,
      taskName: null,
      patrolTypes: [],
      patrolType: null,
      taskPlanCode: null,
      taskExecuteType: null,//为0表示删除任务
      executeTime: null,
      cycleTask: {
        endTime: null,
        executeMonth: [],
        executeTime: null,
        executeWeekday: [],
        intervalNum: 1,
        intervalUnit: 'minute',
        startTime: null,
        taskLoopType: 0,
        taskName: null,
        taskPlanCode: null
      },
      rules: {
        endTime: [{ type: 'date', required: true, message: '此项为必选项!', trigger: 'blur' }],
        executeMonth: [{ type: 'array',required: true, message: '此项为必选项!', trigger: 'change' }],
        executeTime: [{ type: 'date', required: true, message: '此项为必选项!', trigger: 'blur' }],
        executeWeekday: [{ type: 'array',required: true, message: '此项为必选项!', trigger: 'change' }],
        intervalNum: [{ required: true, message: '此项为必选项!', trigger: 'change' }],
        intervalUnit: [{ required: true, message: '此项为必选项!', trigger: 'change' }],
        startTime: [{ type: 'date',required: true, message: '此项为必选项!', trigger: 'blur' }]
      },
      months: [{
        key: '1',
        value: '一月'
      },
      {
        key: '2',
        value: '二月'
      },
      {
        key: '3',
        value: '三月'
      },
      {
        key: '4',
        value: '四月'
      },
      {
        key: '5',
        value: '五月'
      },
      {
        key: '6',
        value: '六月'
      },
      {
        key: '7',
        value: '七月'
      },
      {
        key: '8',
        value: '八月'
      },
      {
        key: '9',
        value: '九月'
      },
      {
        key: '10',
        value: '十月'
      },
      {
        key: '11',
        value: '十一月'
      },
      {
        key: '12',
        value: '十二月'
      }],
      weekdays: [{
        key: '1',
        value: '周一'
      },
      {
        key: '2',
        value: '周二'
      },
      {
        key: '3',
        value: '周三'
      },
      {
        key: '4',
        value: '周四'
      },
      {
        key: '5',
        value: '周五'
      },
      {
        key: '6',
        value: '周六'
      },
      {
        key: '7',
        value: '周日'
      }],
      taskData: [],
      currentPage: null,
      pageSize: 10,
      total: null,
      dialogVisible: false,
      taskTipInfo: '',
      editDialogVisible: false,
      cycleDialogVisible: false,
      editData: {
        taskPlanCode: null,
        taskName: null,
        priority: null,
        endAction: '0',
        patrolTypeName: null
      },
      prioritys: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    search() {
      this.currentPage = 1
      this.getTaskList(this.currentPage)
    },
    reset() {
      this.taskName = null
      this.patrolType = null
    },
    insert() {
      this.$router.push({
        path: '/szRobot/dashboard/taskInsert',
        query: {
          station: this.station
        }
      })
    },
    execute(row, value) {
      if (value == 1) {
        this.dialogVisible = true
        this.taskPlanCode = row.taskPlanCode
        this.taskExecuteType = 1
        this.taskTipInfo = '是否要立即执行任务?'
      }
      else if (value == 2) {
        this.dialogVisible = true
        this.taskPlanCode = row.taskPlanCode
        this.taskExecuteType = 2
      }
      else if (value == 3) {
        this.cycleDialogVisible = true
        this.cycleTask.taskName = row.taskName
        this.cycleTask.taskPlanCode = row.taskPlanCode
        this.taskExecuteType = 3
      }
    },
    pointEdit(row) {
      this.$router.push({
        path: '/szRobot/dashboard/pointEdit',
        query: {
          station: this.station,
          taskPlanCode: row.taskPlanCode,
          taskName: row.taskName,
          priority: row.priority,
          patrolType: row.patrolType,
          endAction: row.endAction
        }
      })
    },
    edit(row) {
      this.editData.taskPlanCode = row.taskPlanCode
      this.editData.taskName = row.taskName
      this.editData.priority = row.priority
      this.editData.endAction = row.endAction
      this.editData.patrolTypeName = row.patrolTypeName
      this.editDialogVisible = true
    },
    closeEdit() {
      this.editData.taskPlanCode = null
      this.editData.taskName = null
      this.editData.priority = null
      this.editData.endAction = '0'
      this.editData.patrolTypeName = null
      this.editDialogVisible = false
    },
    cancelEdit() {
      this.closeEdit()
    },
    confirmEdit() {
      this.updateTask()
      this.closeEdit()
    },
    closeCyleDialog() {
      this.$refs.cycle.resetFields()

      this.cycleTask.endTime = null
      this.cycleTask.executeMonth = []
      this.cycleTask.executeTime = null
      this.cycleTask.executeWeekday = []
      this.cycleTask.intervalNum = 1
      this.cycleTask.intervalUnit = 'minute'
      this.cycleTask.startTime = null
      this.cycleTask.taskLoopType = 0
      this.cycleTask.taskName = null
      this.cycleTask.taskPlanCode = null

      this.cycleDialogVisible = false
    },
    cancelCycle() {
      this.closeCyleDialog()
    },
    confirmCycle() {
      this.$refs.cycle.validate((valid) => {
          if (valid) {
            this.executeTaskPlanPeriodically()
          } else {
            return false
          }
        })
    },
    updateTask() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/updateTaskPlan`,
        {
          taskPlanCode: this.editData.taskPlanCode,
          taskName: this.editData.taskName,
          priority: this.editData.priority,
          endAction: this.editData.endAction
        }, {
        params: {
          masterId: this.station
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.$message({
            message: '修改任务成功',
            type: 'success'
          })
          this.getTaskList(this.currentPage)
        } else {
          this.$message({
            message: '修改任务失败',
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '修改任务失败',
          type: 'error'
        })
      })
    },
    deleteDataDialog(row) {
      this.taskTipInfo = '是否要删除该任务模板?'
      this.taskExecuteType = 0
      this.taskPlanCode = row.taskPlanCode
      this.dialogVisible = true
    },
    deleteData() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/deleteTaskPlan`, null, {
        params: {
          taskPlanCode: this.taskPlanCode,
          masterId: this.station
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.$message({
            message: '删除任务成功',
            type: 'success'
          })
          this.getTaskList(this.currentPage)
        } else {
          this.$message({
            message: '删除任务失败',
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '删除任务失败',
          type: 'error'
        })
      })
    },
    closeDialog() {
      this.taskTipInfo = ''
      this.dialogVisible = false
    },
    cancel() {
      this.closeDialog()
    },
    confirm() {
      if (this.taskExecuteType == 0) {
        this.deleteData()
      } else if (this.taskExecuteType == 1) {
        this.executeTaskPlanRightNow()
      } else if (this.taskExecuteType == 2) {
        if (this.executeTime == null) {
          this.$message({
            type: 'warning',
            message: '请选择执行时间!',
            duration: 3000
          })
          return
        }
        this.executeTaskPlanRegularly()
      }
      this.closeDialog()
    },
    executeTaskPlanRightNow() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/executeTaskPlanRightNow`, null, {
        params: {
          taskPlanCode: this.taskPlanCode
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '操作失败',
          type: 'error'
        })
      })
    },
    executeTaskPlanRegularly() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/executeTaskPlanRegularly`,
        {
          executeTime: this.executeTime,
          taskPlanCode: this.taskPlanCode
        },
        {
          params: {
            masterId: this.station
          },
          headers: {
            Gz_security_token: this.$store.getters.Gz_security_token
          }
        }).then(({ data }) => {
          if (data.success) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'error'
            })
          }
        }).catch(() => {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        })
    },
    executeTaskPlanPeriodically() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/executeTaskPlanPeriodically`,
        {
        endTime: this.formattedDateTime(this.cycleTask.endTime),
        executeMonth: this.cycleTask.executeMonth,
        executeTime: this.formattedTime(this.cycleTask.executeTime),
        executeWeekday: this.cycleTask.executeWeekday,
        intervalNum: this.cycleTask.intervalNum,
        intervalUnit: this.cycleTask.intervalUnit,
        startTime: this.formattedDateTime(this.cycleTask.startTime),
        taskLoopType: this.cycleTask.taskLoopType,
        taskName: this.cycleTask.taskName,
        taskPlanCode: this.cycleTask.taskPlanCode
        },
        {
          params: {
            masterId: this.station
          },
          headers: {
            Gz_security_token: this.$store.getters.Gz_security_token
          }
        }).then(({ data }) => {
          if (data.success) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.closeCyleDialog()
          } else {
            this.$message({
              message: data.msg,
              type: 'error'
            })
          }
        }).catch(() => {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        })
    },
    changeStation() {
      this.currentPage = 1
      this.total = 0
      this.getTaskList(this.currentPage)
    },
    handlePage(currentPage) {
      this.getTaskList(currentPage)
    },
    getMasterList() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/user/masterList`, null, {
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.stations = data.data
          if (this.stations != null && this.stations.length > 0)
            this.station = this.stations[0].id
        }
      })
    },
    getPatrolType() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/getPatrolTypeList`, null, {
        params: {
          masterId: this.station
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.patrolTypes = data.data
        }
      })
    },
    getTaskList(currentPage) {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskCustomizationControl/getTaskPlanList`, null,
        {
          params: {
            curPage: currentPage,
            pageSize: this.pageSize,
            taskName: this.taskName,
            patrolType: this.patrolType,
            masterId: this.station
          },
          headers: {
            Gz_security_token: this.$store.getters.Gz_security_token
          }
        }).then(({ data }) => {
          if (data.success) {
            if (data.data != null) {
              this.taskData = data.data.baseTaskPlanListVo
              this.total = data.data.pageInfo.total
            }
          }
        })
    },
    formattedDateTime(dateTime) {
      if (dateTime == null)
        return null
      const year = dateTime.getFullYear()
      const month = (dateTime.getMonth() + 1).toString().padStart(2, '0')
      const day = dateTime.getDate().toString().padStart(2, '0')
      const hour = dateTime.getHours().toString().padStart(2, '0')
      const minute = dateTime.getMinutes().toString().padStart(2, '0')
      const second = dateTime.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    formattedTime(time){
      if (time == null)
        return null
      const hour = time.getHours().toString().padStart(2, '0')
      const minute = time.getMinutes().toString().padStart(2, '0')
      const second = time.getSeconds().toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    }
  },
  created() {
    this.currentPage = 1
    this.total = 0
  },
  mounted() {
    this.getMasterList()
    this.getPatrolType()
    this.getTaskList(this.currentPage)
  }
}
</script>
<style scoped>
.body {
  margin-left: 20px;
  width: 1876px;
  height: 940px;
  background: rgba(1, 55, 66, 1);
  border: 1px solid rgba(0, 188, 191, 1);
  box-shadow: inset 20px 0px 35px -9px rgba(6, 115, 115, 1);

  .operator-dialog {

    .el-dialog {
      margin-top: 300px !important;
      background: rgba(52, 65, 86, 1) !important;

      .el-dialog__header {
        background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);

        .el-dialog__title {
          font-size: 20px;
          font-weight: 700;
          color: rgba(0, 255, 255, 1);
        }
      }

      .el-dialog__body {
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

        .el-icon-info {
          color: rgba(0, 255, 255, 1);
          margin-right: 5px;
        }

        .el-icon-warning {
          color: rgba(0, 255, 255, 1);
          margin-right: 5px;
        }
      }

      .execute-time {
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

        .el-input__prefix {
          display: none;
        }

        .el-input__inner {
          font-size: 16px;
          font-weight: 500;
          color: rgba(229, 229, 229, 1);
          padding-left: 10px;
          border: none;
          background: rgba(209, 209, 209, 0.15);
          box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
        }
      }

      .el-dialog__footer {
        text-align: center;
        padding-top: 0;

        .el-button--default {
          border-radius: 2px;
          background: rgba(80, 211, 225, 0.5);
          box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .el-button--primary {
          border-radius: 2px;
          background: linear-gradient(180deg, rgba(52, 213, 235, 1) 0%, rgba(12, 150, 168, 1) 100%);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .edit-dialog {
    .el-dialog {
      background: rgba(52, 65, 86, 1) !important;

      .el-dialog__header {
        background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);

        .el-dialog__title {
          font-size: 20px;
          font-weight: 700;
          color: rgba(0, 255, 255, 1);
        }
      }

      .el-dialog__body {
        padding-bottom: 0;
      }

      .el-dialog__footer {
        text-align: center;
        padding-top: 0;

        .el-button--default {
          border-radius: 2px;
          background: rgba(80, 211, 225, 0.5);
          box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .el-button--primary {
          border-radius: 2px;
          background: linear-gradient(180deg, rgba(52, 213, 235, 1) 0%, rgba(12, 150, 168, 1) 100%);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }


      .el-input__prefix {
        width: 70px;
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(229, 229, 229, 1);
        border: none;
      }

      .el-input__inner {
        padding-left: 90px;
        padding-bottom: 1px;
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        color: rgba(229, 229, 229, 1);
        background: rgba(209, 209, 209, 0.15);
        box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
        border: none;
      }

      .el-input__inner:disabled {
        background: #606874;
      }

      .el-select {
        width: 100%;
      }

      .el-select-dropdown {
        background: rgba(7, 131, 140, 1);
        border: 1px solid rgba(7, 131, 140, 1);
      }

      .el-select-dropdown__item {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        background: rgba(7, 131, 140, 1);
        color: rgba(255, 255, 255, 1);
      }

      .el-select-dropdown__item:hover {
        background: rgba(17, 173, 240, 0.1);
        border: 1px solid rgba(17, 173, 240, 0.2);
        box-shadow: inset 0px 0px 9.34px rgba(0, 153, 255, 0.5);
      }

      .el-select-dropdown__item.selected {
        color: #409EFF;
      }

      .end-action {
        font-size: 14px;
        font-weight: 500;
        color: rgba(229, 229, 229, 1);
        margin-left: 10px;
        margin-right: 10px;
      }

      .el-radio__label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

      .el-radio__inner {
        background: rgba(52, 65, 86, 1);
        border: 1px solid rgba(229, 230, 235, 1);
      }

      .el-radio .el-radio__input.is-checked .el-radio__inner {
        background: rgba(7, 131, 140, 1);
        border: 1px solid rgba(7, 131, 140, 1);
      }
    }
  }

  .cycle-dialog {
    .el-dialog {
      background: rgba(52, 65, 86, 1) !important;

      .el-dialog__header {
        background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);

        .el-dialog__title {
          font-size: 20px;
          font-weight: 700;
          color: rgba(0, 255, 255, 1);
        }
      }

      .el-dialog__body {
        padding-bottom: 0;
        padding-top: 20px;

        .el-divider--horizontal {
          height: 1px;
          background: rgba(135, 135, 135, 1);
          display: block;
          margin: 10px 0 10px 0;
        }

        .el-form-item__label{
          width: 80px;
          font-size: 14px;
        font-weight: 500;
        color: rgba(229, 229, 229, 1);
          padding: 0;
        }

        .el-form-item__error{
          margin-left: 80px;
        }

        .el-radio-group {
          width: 456px;
        }

        .el-checkbox-group {
          float: left;
          width: 450px;
        }

        .el-checkbox__label {
          font-size: 14px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .el-checkbox__inner {
          background: rgba(52, 65, 86, 1);
          border: 1px solid rgba(229, 230, 235, 1);
        }

        .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
          background: rgba(0, 125, 125, 1);
          border: 1px solid rgba(0, 125, 125, 1);
        }

        .task-time {
          width: 456px;

          .el-input__inner {
            font-size: 14px;
            font-weight: 500;
            color: rgba(229, 229, 229, 1);
            border: none;
            background: rgba(209, 209, 209, 0.15);
            box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
          }
        }

        .el-input-number {
          width: 150px;
          height: 30px;
          

          .el-input__inner{
            font-size: 14px;
            font-weight: 500;
            color: rgba(229, 229, 229, 1);
            background: rgba(52, 65, 86, 1);
            height: 30px;
            border-top: 2px solid rgba(7, 131, 140, 1);
            border-bottom: 2px solid rgba(7, 131, 140, 1);
          }
          .el-input-number__decrease{
            height: 30px;
          }
          .el-input-number__increase{
            height: 30px;
          }
        }
      }

      .el-dialog__footer {
        text-align: center;
        padding-top: 0;

        .el-button--default {
          border-radius: 2px;
          background: rgba(80, 211, 225, 0.5);
          box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .el-button--primary {
          border-radius: 2px;
          background: linear-gradient(180deg, rgba(52, 213, 235, 1) 0%, rgba(12, 150, 168, 1) 100%);
          border: none;
          font-size: 16px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }
      }

      .el-radio__label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

      .el-radio__inner {
        background: rgba(52, 65, 86, 1);
        border: 1px solid rgba(229, 230, 235, 1);
      }

      .el-radio .el-radio__input.is-checked .el-radio__inner {
        background: rgba(7, 131, 140, 1);
        border: 1px solid rgba(7, 131, 140, 1);
      }
    }
  }
}

.body-top {
  height: 56px;
  background: rgba(80, 211, 225, 0.15);
  display: flex;
  align-items: center;
}

.body-top-title {
  margin-left: 20px;

  .el-input__prefix {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 500;
    color: rgba(223, 238, 243, 1);
  }

  .el-input__inner {
    padding-bottom: 2px;
    padding-left: 70px;
    width: 180px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1px;
    background: none;
    border: none;
    color: rgba(223, 238, 243, 1);
  }

  .el-select-dropdown {
    background: rgba(7, 131, 140, 1);
    border: 1px solid rgba(7, 131, 140, 1);
  }

  .el-select-dropdown__item {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    background: rgba(7, 131, 140, 1);
    color: rgba(223, 238, 243, 1);
  }

  .el-select-dropdown__item:hover {
    background: rgba(17, 173, 240, 0.1);
    border: 1px solid rgba(17, 173, 240, 0.2);
    box-shadow: inset 0px 0px 9.34px rgba(0, 153, 255, 0.5);
    font-size: 20px;
  }

  .el-select-dropdown__item.selected {
    color: #409EFF;
  }
}

.body-content-top {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  color: rgba(0, 255, 255, 1);
}

.body-content-top-title {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  margin: 24px 0 13px 18px;
  padding-left: 51px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
  letter-spacing: 4px;
}


.body-content-bottom {
  width: 1836px;
  height: 776px;
  margin-left: 20px;
  background: rgba(13, 79, 90, 1);

  .el-divider--horizontal {
    height: 1px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(255, 255, 255, 0) 100%);
    display: block;
    margin: 10px 0;
  }

  .body-content-bottom-table {
    display: flex;
    width: 100%;
    height: 680px;
    background: rgba(13, 79, 90, 1);

    .body-content-bottom-taskList {
      width: 100%;
      height: 100%;

      .taskList-search {
        display: flex;
        margin-left: 15px;
        margin-top: 20px;
        height: 36px;

        .el-input__prefix {
          width: 80px;
          height: 100%;
          display: flex;
          align-items: center;
          margin-left: 10px;
          font-size: 16px;
          font-weight: 500;
          color: rgba(166, 166, 166, 1);
          border: none;
        }

        .el-input__inner {
          padding-left: 100px;
          padding-bottom: 1px;
          width: 280px;
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 1px;
          color: rgba(255, 255, 255, 1);
          background: rgba(13, 79, 90, 1);
          box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
          border: none;
        }


        .task-name {
          width: 280px;
        }

        .patrol-type {
          width: 280px;
          margin-left: 20px;
          font-size: 16px;
          font-weight: 500;
          background: rgba(13, 79, 90, 1);
          color: rgba(255, 255, 255, 1);

          .el-select-dropdown {
            background: rgba(7, 131, 140, 1);
            border: 1px solid rgba(7, 131, 140, 1);
          }

          .el-select-dropdown__item {
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 1px;
            background: rgba(7, 131, 140, 1);
            color: rgba(255, 255, 255, 1);
          }

          .el-select-dropdown__item:hover {
            background: rgba(17, 173, 240, 0.1);
            border: 1px solid rgba(17, 173, 240, 0.2);
            box-shadow: inset 0px 0px 9.34px rgba(0, 153, 255, 0.5);
          }

          .el-select-dropdown__item.selected {
            color: #409EFF;
          }
        }

        .task-btn {
          flex: 1;
          text-align: right;
          margin-right: 15px;

          .el-button {
            width: 80px;
            height: 36px;
            border: none;
            border-radius: 2px;
            background: rgba(80, 211, 225, 0.5);
            box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
      }

      .taskList-table {
        margin-left: 15px;

        .el-table {
          background: rgba(13, 79, 90, 1);
          height: 407px;
        }

        .el-table .el-table__row {
          height: 36px;
        }

        .el-table th {
          text-align:center;
          font-size: 14px;
          font-weight: 500;
          color: rgba(229, 229, 229, 1);
          background: rgba(13, 79, 90, 1);
          border: none;
        }

        .el-table td {
          text-align:center;
          font-size: 14px;
          font-weight: 500;
          color: rgba(229, 229, 229, 1);
          background: rgba(13, 79, 90, 1);
          border: none;
        }

        .el-table::before {
          background: none;
        }

        .end-column::before {
          background: none;
        }

        .el-button {
          font-size: 14px;
          font-weight: 500;
          color: rgba(229, 229, 229, 1);
        }

        .el-button:hover {
          cursor: pointer;
        }

        .el-table__fixed::before,
        .el-table__fixed-right::before {
          background: none;
        }

        .el-table__body tr:hover>td {
          background: rgba(52, 59, 69, 1);

        }

        .el-table--medium th,
        .el-table--medium td {
          padding: 2px 0;
        }
      }
    }
  }

  .body-content-bottom-page {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .el-pagination__total {
      width: 60px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border-radius: 4px;
      border: 1px solid rgba(177, 200, 230, 0.2);
      text-align: center;
    }

    .el-pagination .btn-prev {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .btn-prev:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .btn-quickprev {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .btn-quickprev:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .btn-next {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .btn-next:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .btn-quicknext {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .btn-quicknext:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .number {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .number:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .number.active {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }

    .el-pagination .el-icon-more {
      width: 24px;
      height: 28px;
      background: rgba(13, 79, 90, 1);
      color: rgba(193, 206, 222, 1);
      font-size: 12px;
      font-weight: 400;
      border: 1px solid rgba(177, 200, 230, 0.2);
    }

    .el-pagination .el-icon-more:hover {
      background: rgba(30, 119, 135, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
